<template>

	<view class="commodity" :style="`flex-wrap:${isWarp}`">

		<view :style="`width:${itemWidth}`" class="commodity-item" v-for="(item,index) in commodityData" :key='index'>
			<image :style="`height:${imgHeight}`" class="commodity-img" :src="item.imgUrl" mode=""></image>
			<view class="commodity-content">
				<text class="commodity-name" :style="`font-size: ${nameSize};`">{{item.name}}</text>
				<view class="price">
					<text class="cprice">￥{{item.cprice}}</text>
					<text class="oprice">￥{{item.oprice}}</text>

				</view>
				<text class="discount">{{item.discount}}折</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "Commodity",
		props: {
			commodityData: {
				type: Array,
				default: () => []
			},
			itemWidth: {
				type: String,
				default: '375rpx'
			},
			imgHeight: {
				type: String,
				default: '375rpx'
			},
			isWarp: {
				type: String,
				default: 'wrap'
			},
			nameSize: {
				typr: String,
				default: '26rpx'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.commodity {
		display: flex;
		flex-wrap: wrapw;
		padding: 5rpx 0rpx;
	}

	.commodity-item {
		/* 	width: 375rpx; */
		padding-bottom: 20rpx;
	}

	.commodity-img {
		width: 100%;
		/* 		height: 375rpx; */
	}

	.commodity-content {
		text-align: center;
	}

	.commodity-name {
		overflow: hidden;
		/* 	text-overflow: ellipsis;内容区域的极限处截断文本,当对象内文本一处时显示省略标记(...) */
		text-overflow: ellipsis;
		/* 		-webkit-box 属性值使元素表现为一个块级盒子 */
		display: -webkit-box;
		/* -webkit-line-clamp 是一个WebKit内核浏览器所支持的属性，用于控制多行文本的显示行数 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333333;
		/* word-break: break-all; 是 CSS 属性之一，用于指定在何处可以断开单词换行。 */
		word-break: break-all;
		padding: 6rpx 20rpx;
	}

	.price {
		margin: 8rpx 0rpx;
	}

	.cprice {
		font-weight: bold;
	}

	.oprice {
		color: #c8c7c8;
		text-decoration: line-through;
		font-size: 24rpx;
	}

	.discount {
		/* 	color: #d60070;
		border: 2rpx solid #d60070;
		font-size: 26rpx;
		padding: 4rpx; */
		border-radius: 4rpx;
		border: 1px solid #FF3333;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: #FF3333;
	}
</style>